<template>
    <div>
        <el-dialog title="登录" :visible.sync="loginVisible" width="300px" center>
            <el-form :model="loginForm" :rules="loginFormRules" ref="loginForm" class="demo-ruleForm">
            <el-form-item prop="userName">
            <el-input placeholder="请输入账号" prefix-icon="el-icon-user-solid" v-model="loginForm.userName"></el-input>
            </el-form-item> 
            <el-form-item prop="password">
            <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-view" v-model="loginForm.password"></el-input>
            </el-form-item> 
             <el-form-item> 
            <el-button @click="onLogin" type="primary" size="medium" style="width:100%">登录</el-button>
            </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import api  from "../http/usersApi";
import {mapGetters} from "vuex";
// import { log } from 'util';

    export default {
        data() {
            let validate=(rule,value,callback)=>{
                if(!/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/.test(value)){
                    callback(new Error("字母开头，长度5-16之间，允许字母数字下划线"))
                }else{
                    callback();
                }
            }
            return {
                // loginVisible:false,
                loginForm:{
                    userName:"",
                    password:""
                },
                loginFormRules:{
                    userName:[
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {validator: validate, trigger: 'blur'}
                    ],
                    password:[
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {validator: validate, trigger: 'blur'}
                    ],
                }
            }
        },
        computed:{
            loginVisible:{
                get(){
                    return this.$store.getters.getShowLogin
                },
                set(value){
                    this.$store.commit("setShowlogin",value)
                }
            }
        },
        methods:{
            // showLogin(){
            //     this.loginVisible=true
            // },
            onLogin(){
                this.$refs.loginForm.validate(async (valid)=>{
                    //没有通过校验就返回
                    if(!valid) return;
                    // 通过校验就去发送登录请求
                    let {data:res}=await api.login(this.loginForm);
                    if(res.code !=="001"){
                    //   this.$notifyError(res.msg)
                    }else{
                        // 登录框隐藏
                        this.loginVisible=false;
                        // 把当前用户名存储到vuex中
                        this.$store.commit("setUser",res.user)
                        // 把返回的信息存储到本次缓存
                        window.localStorage.setItem("user",JSON.stringify(res.user))
                        // this.$notifySuccess(res.msg)
                        // console.log(this.$notifySuccess);
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>